<template>
<div class="mycv">
    <div class="containner">
        <div class="first-page">
            <div class="profile">
            <div class="head-img"><img class="img" src="@/assets/img/head.jpg"></img></div>
            <div class="contact-way">
                <p>王九华</p>
                <p>Tel:<span>15750793795</span></p>
                <p>Email:<span>jiuhuaw@126.com</span></p>
                <p>Github：<a href="https://github.com/xszi">https://github.com/xszi</a></p>
            </div>
            </div>
            <div class="education">
                <p class="title">教育背景</p>
                <div class="content">
                    <table>
                        <tr class="row"><td>软谋教育</td><td>web全栈开发</td><td>2017~2018</td></tr>
                        <tr class="row"><td>厦门大学</td><td>材料硕士</td><td>2015~2018</td></tr>
                        <tr class="row"><td>南昌航空大学</td><td>材料本科</td><td>2011~2015</td></tr>
                    </table>
                </div>
            </div>
            <div class="skill">
                <p class="title">个人技能</p>
                <div class="content">
                    <p class="row"><i class="iconfont iconyuandian"></i>熟练掌握 HTML(5)，CSS(3)，能够编写响应式页面</p>
                    <p class="row"><i class="iconfont iconyuandian"></i>熟练掌握 JavaScript 语言，了解ES6 的新特性</p>
                    <p class="row"><i class="iconfont iconyuandian"></i>熟悉使用 jQuery，Bootstrap，vue等 JavaScript 类库和框架</p>
                    <p class="row"><i class="iconfont iconyuandian"></i>了解Gulp构建工具，webpack模块依赖及babel编译工具，可配合模块化进行开发</p>
                    <p class="row"><i class="iconfont iconyuandian"></i>熟悉使用 Git进行项目的版本控制</p>
                    <p class="row"><i class="iconfont iconyuandian"></i>了解 Node.js, 对MongoDB有一定认识，能够配合 Express 框架进行后台开发</p>
                    <p class="row"><i class="iconfont iconyuandian"></i>了解.net和Sql Server</p>
                </div>
                <div class="github"></div>
            </div>
        </div>
        <div class="second-page">
            <div class="work"></div>
            <div class="other"></div>
            <div class="certificate"></div>
        </div>
    </div>
</div>
</template>

<style lang="less" scoped>
.mycv{
    width: 100%;
    height: 100%;
    background: #e0e0e0;
    padding: 20px 0;
    font-family: 'Microsoft YaHei';
    .containner{
        width: 96%;
        border-radius: 5px;
        margin: 20px auto;
        -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
        display: flex;
        justify-content: space-between;
    }
}

.first-page{
    width: 47%;
    background: #fff;
    border-radius: 10px;
    padding: 50px 20px;
    .profile{
        margin: 0 auto;
        padding-left: 30px;
        display: flex;
        flex-direction: row;
        .head-img{
            margin: 30px 10px 10px 20px;
            .img{
                width: 90px;
                height: 126px;
            }
        }
        .contact-way{
            margin: 30px;
            padding-top: 15px;
            font-size: 15px;
            text-align: left;
            p{
                line-height: 22px;
                font-weight: 500;
                span{
                    margin-left: 10px;
                }
                a{
                    color:#00796b;
                }
            }
            p:nth-child(1) {
                color:#0079b6;
                font-size: 30px;
                font-weight: 800;
                line-height: 40px;
                font-family: KaiTi;
            }
        }
    }
    .title{
        height: 30px;
        font-size: 18px;
        color: #00796b;
        border-bottom: 1px solid #00796b;
        text-align: left;
        margin: 0 40px;
    }
    .education{
        width: 100%;
        height: 100px;
        margin-top: 30px;
        .content{
            display: flex;
            flex-direction: column;
            margin-top: 15px;
            font-size: 15px;
            .row{
                width: 200px;
                line-height: 22px;
                text-align: center;
            }
        }
    }
    .skill{
        width: 100%;
        margin-top: 40px;
        .content{
            font-size: 15px;
            margin-top: 15px;
            padding-left: 40px;
            .row{
                line-height: 30px;
                text-align: left;
                .iconfont{
                    font-size: 10px;
                    line-height: 30px;
                    margin-right: 10px;
                }
            }
        }
    }
}

.second-page{
    width: 47%;
    background: #fff;
    border-radius: 10px;
    span{

    }
}
</style>
